import React from 'react'
import PropTypes from 'prop-types'
import {Form, Input, InputNumber, Row, Col, Select, DatePicker,Modal, Radio} from 'antd'
import moment from 'moment'

const {Option} = Select
const {TextArea} = Input
const FormItem = Form.Item

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
}

const textAreaLayout = {
  labelCol: {span: 2},
  wrapperCol: {span: 22},
}

const modal = ({
                 item = {},
                 onOk,
                 disable,
                 form: {
                   getFieldDecorator,
                   validateFields,
                   getFieldsValue,
                 },
                 ...modalProps
               }) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      if (data.birthDay) {
        data.birthDay = moment(data.birthDay).format('YYYY-MM-DD')
      }
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }



  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Row gutter={{md: 12, lg: 24, xl: 48}}>
          <Col md={12} sm={24}>
            <FormItem {...formItemLayout} label="归属员工">
              {getFieldDecorator('empId', {
                initialValue: item.empId,
                rules: [{required: true, message: '请输入工号或姓名'}],
              })(<Input disabled={disable} placeholder="请输入工号或姓名"/>)}
              {getFieldDecorator('id', {initialValue: item.id})(<input type='hidden'/>)}
            </FormItem>
          </Col>
          <Col md={12} sm={24}>
            <FormItem {...formItemLayout} label="编号">
              {getFieldDecorator('sn', {
                initialValue: item.sn,
              })(<Input disabled={disable} placeholder="请输入设备编号"/>)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{md: 12, lg: 24, xl: 48}}>
          <Col md={12} sm={24}>
            <FormItem {...formItemLayout} label="UUID码">
              {getFieldDecorator('deviceCode', {
                initialValue: item.deviceCode,
                rules: [{required: true, message: '请输入设备UUID'}],
              })(<Input disabled={disable} placeholder="请输入设备UUID"/>)}
            </FormItem>
          </Col>

          <Col md={12} sm={24}>
            <FormItem {...formItemLayout} label="备注">
              {getFieldDecorator('remark', {
                initialValue: item.remark,
              })(<Input disabled={disable} placeholder="手动添加"/>)}
            </FormItem>
          </Col>


        </Row>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
